<template>
    <div>
        <p>数字：{{ count }}</p>
        <p>赋值：<el-input v-model="a"></el-input>
        计算改变：{{ b }}
        监听c: {{ c }}</p>

        <p>姓名：{{ d.name }}</p>
    </div>
</template>
<script setup>
import { defineProps ,ref, computed , watchEffect,watch} from 'vue';
let props = defineProps({
    count: String,
    item: Object
})

let a = ref(props.count)

let b = computed(() => a.value + 'computed')

let c = ref()

let d =ref({})

const gettableData = () => {
    console.log(d.name)
}

// 代码运行就执行
watchEffect(() => {
    c = props.count
    console.log('count修改了')
})
watchEffect(() => {
    console.log(1)
    d = props.item
    
})
watch(props.item,(newval,oldval)=> {
    gettableData()
})
 
</script>

<style lang="scss">

</style>